<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的模板</title>

</head>

<body>


    <div id="app">
        父组件的数据:{{sum}}
        <cpn @upclick="up" @downclick="downs"></cpn>

    </div>


</body>
<template id="cpns">
  <div>
    <button v-on:click="downclick">-</button>
    <button v-on:click="upclick">+</button> 
  </div>
</template>


<script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            sum: 0
        },
        methods: {
            up: function() {
                console.log(1);
                this.sum++;
            },
            downs: function() {
                this.sum--;
            }
        },
        components: {
            cpn: {
                template: '#cpns',
                methods: {
                    upclick() {
                        this.$emit('upclick');
                    },
                    downclick() {
                        this.$emit('downclick');
                    }
                },
            }
        }
    })
</script>